<template>
  <view class="terms-container">
    <!-- 导航栏 -->
    <nav-bar title="服务条款" :show-back="true" />
    
    <!-- 条款内容 -->
    <scroll-view class="content-scroll" scroll-y="true">
      <view class="terms-content">
        <view class="terms-header">
          <text class="terms-title">服务条款</text>
          <text class="update-date">更新日期：{{ updateDate }}</text>
          <text class="effective-date">生效日期：{{ effectiveDate }}</text>
        </view>

        <view class="terms-section">
          <text class="section-title">前言</text>
          <text class="section-content">
            欢迎使用珠宝小程序！在使用我们的服务前，请您仔细阅读并理解本服务条款。使用我们的服务即表示您同意遵守本条款的所有规定。如果您不同意本条款的任何内容，请勿使用我们的服务。
          </text>
        </view>

        <view class="terms-section">
          <text class="section-title">一、服务说明</text>
          <text class="section-content">
            珠宝小程序是一个专业的珠宝首饰展示、销售和服务平台，为用户提供以下服务：
          </text>
          <view class="service-list">
            <text class="service-item">• 珠宝首饰商品展示和在线购买服务</text>
            <text class="service-item">• 商品搜索、筛选和比较功能</text>
            <text class="service-item">• 订单管理和物流配送服务</text>
            <text class="service-item">• 客户服务和售后支持</text>
            <text class="service-item">• 商品预约和定制服务</text>
            <text class="service-item">• 其他相关增值服务</text>
          </view>
        </view>

        <view class="terms-section">
          <text class="section-title">二、用户权利和义务</text>
          <view class="subsection">
            <text class="subsection-title">2.1 用户权利</text>
            <text class="subsection-content">
              • 享受平台提供的各项服务
              • 对购买的商品享有质量保证
              • 获得真实、准确的商品信息
              • 享有个人信息保护的权利
              • 对服务质量提出意见和建议
            </text>
          </view>
          <view class="subsection">
            <text class="subsection-title">2.2 用户义务</text>
            <text class="subsection-content">
              • 提供真实、准确的个人信息
              • 遵守相关法律法规和平台规则
              • 不得恶意攻击或破坏平台系统
              • 不得从事虚假交易或欺诈行为
              • 妥善保管账户信息，防止被盗用
              • 按时支付订单款项
            </text>
          </view>
        </view>

        <view class="terms-section">
          <text class="section-title">三、订单和支付</text>
          <view class="subsection">
            <text class="subsection-title">3.1 下单流程</text>
            <text class="subsection-content">
              用户在平台选择商品后，需要填写收货地址、选择配送方式，确认订单信息无误后提交订单并完成支付。
            </text>
          </view>
          <view class="subsection">
            <text class="subsection-title">3.2 支付方式</text>
            <text class="subsection-content">
              我们支持微信支付等安全的在线支付方式。所有支付信息都经过加密处理，确保交易安全。
            </text>
          </view>
          <view class="subsection">
            <text class="subsection-title">3.3 价格政策</text>
            <text class="subsection-content">
              商品价格以您下单时显示的价格为准。如遇价格异常（明显低于市场价格），我们有权取消订单。
            </text>
          </view>
        </view>

        <view class="terms-section">
          <text class="section-title">四、配送和验收</text>
          <view class="subsection">
            <text class="subsection-title">4.1 配送服务</text>
            <text class="subsection-content">
              我们与专业的物流公司合作，为您提供安全、快速的配送服务。具体配送时间根据商品类型和配送地址而定。
            </text>
          </view>
          <view class="subsection">
            <text class="subsection-title">4.2 商品验收</text>
            <text class="subsection-content">
              收到商品后，请您及时验收。如发现商品有质量问题或与描述不符，请在收货后7天内联系客服处理。
            </text>
          </view>
        </view>

        <view class="terms-section">
          <text class="section-title">五、退换货政策</text>
          <view class="return-policy">
            <text class="policy-item">• 商品质量问题：7天无理由退货</text>
            <text class="policy-item">• 商品损坏或与描述不符：支持退换货</text>
            <text class="policy-item">• 定制商品：根据具体情况确定退换政策</text>
            <text class="policy-item">• 退货商品必须保持原包装完好</text>
            <text class="policy-item">• 退款将在收到退货商品后3-7个工作日内处理</text>
          </view>
        </view>

        <view class="terms-section">
          <text class="section-title">六、知识产权</text>
          <text class="section-content">
            本平台的所有内容，包括但不限于文字、图片、设计、商标等，均受知识产权法保护。未经授权，任何人不得复制、修改、传播或用于商业目的。
          </text>
        </view>

        <view class="terms-section">
          <text class="section-title">七、免责声明</text>
          <view class="disclaimer-list">
            <text class="disclaimer-item">• 因不可抗力导致的服务中断或延迟</text>
            <text class="disclaimer-item">• 因用户操作失误造成的损失</text>
            <text class="disclaimer-item">• 因网络故障、系统维护等技术原因导致的影响</text>
            <text class="disclaimer-item">• 第三方支付平台的服务问题</text>
            <text class="disclaimer-item">• 物流配送过程中的意外情况</text>
          </view>
        </view>

        <view class="terms-section">
          <text class="section-title">八、争议解决</text>
          <text class="section-content">
            如在使用服务过程中发生争议，双方应首先通过友好协商解决。协商不成的，可向有管辖权的人民法院提起诉讼。
          </text>
        </view>

        <view class="terms-section">
          <text class="section-title">九、联系方式</text>
          <view class="contact-info">
            <text class="contact-item">客服热线：400-123-4567</text>
            <text class="contact-item">客服邮箱：service@zhubao.com</text>
            <text class="contact-item">工作时间：周一至周日 9:00-18:00</text>
            <text class="contact-item">在线客服：小程序内客服功能</text>
          </view>
        </view>

        <view class="terms-footer">
          <text class="footer-text">
            本服务条款的修改权和解释权归珠宝小程序所有。我们保留随时修改本条款的权利，修改后的条款将在小程序内公布并立即生效。继续使用我们的服务即视为您接受修改后的条款。
          </text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const updateDate = ref('2024年1月1日')
const effectiveDate = ref('2024年1月1日')
</script>

<style scoped>
.terms-container {
  height: 100vh;
  background-color: #f8f9fa;
}

.content-scroll {
  height: calc(100vh - 88rpx);
}

.terms-content {
  padding: 40rpx 32rpx;
  background: white;
  margin: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.terms-header {
  text-align: center;
  margin-bottom: 60rpx;
  padding-bottom: 40rpx;
  border-bottom: 2rpx solid #eee;
}

.terms-title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 24rpx;
}

.update-date, .effective-date {
  display: block;
  font-size: 24rpx;
  color: #7f8c8d;
  margin-bottom: 8rpx;
}

.terms-section {
  margin-bottom: 48rpx;
}

.section-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 24rpx;
  padding-left: 16rpx;
  border-left: 6rpx solid #e74c3c;
}

.section-content {
  display: block;
  font-size: 28rpx;
  color: #34495e;
  line-height: 1.6;
  margin-bottom: 24rpx;
  text-align: justify;
}

.subsection {
  margin: 32rpx 0;
  padding-left: 24rpx;
}

.subsection-title {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 16rpx;
}

.subsection-content {
  display: block;
  font-size: 26rpx;
  color: #34495e;
  line-height: 1.6;
  text-align: justify;
}

.service-list, .return-policy, .disclaimer-list {
  padding-left: 24rpx;
}

.service-item, .policy-item, .disclaimer-item {
  display: block;
  font-size: 26rpx;
  color: #34495e;
  line-height: 1.8;
  margin-bottom: 12rpx;
  text-align: justify;
}

.contact-info {
  padding: 24rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  margin-top: 24rpx;
}

.contact-item {
  display: block;
  font-size: 26rpx;
  color: #2c3e50;
  line-height: 1.6;
  margin-bottom: 8rpx;
}

.terms-footer {
  margin-top: 60rpx;
  padding-top: 40rpx;
  border-top: 2rpx solid #eee;
}

.footer-text {
  display: block;
  font-size: 24rpx;
  color: #7f8c8d;
  line-height: 1.6;
  text-align: justify;
}
</style>